<style scoped lang="less">
  .wx-user-list {
    display: flex;
    flex-wrap: wrap;
  }

  .wx-user-item {
    padding: 5px;
    text-align: center;
    transition: all 300ms ease;
    cursor: pointer;
    margin: 5px;
    border-radius: 5px;
  }

  .wx-user-item:hover {
    background: rgba(45, 140, 240, 0.14);
  }

  img.wx-user-item-img {
    height: 80px;
    width: 80px;
  }
  .btn-wrap{
    display: flex;
    justify-content: space-between;
  }
</style>
<template>
  <div>
    <Row>
      <Col span="24">
        <Card style="margin-bottom: 10px">
          <div class="btn-wrap">
            <Button  @click="reFresh">刷新</Button>
            <Button type="primary" @click="showSelectModel">添加</Button>
          </div>

        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <div>
            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                  :page-size="tableShow.pageSize" @on-change="changePage"
                  @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal v-model="selectWxUsermodal.show">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert"></Icon>
        <span>选择微信用户</span>
      </p>
      <Row>
        <Col span="24">
          <Form inline>
            <FormItem style="margin-bottom: 0">
              <label>
                <Input v-model="keywords" placeholder="用户微信昵称"></Input>
              </label>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Button type="primary" @click="search">查找</Button>
            </FormItem>
          </Form>
          <div class="wx-user-list">
            <div class="wx-user-item" v-for="item in wxUserList" @click="showEditModel(item)">
              <img class="wx-user-item-img" :src="item.head_img">
              <div class="wx-user-item-nickname">{{item.nickname}}</div>
            </div>
          </div>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="text" @click="hideSelectModel" style="margin-right: 8px">取消</Button>
      </div>
    </Modal>
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert"></Icon>
        <span>{{formItem.wx_uid ? '编辑' : '新增'}}用户</span>
      </p>

      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
        <FormItem label="姓名" prop="name">
          <Input v-model="formItem.name" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem label="手机号" prop="phone">
          <Input v-model="formItem.phone" placeholder="请输入手机号"></Input>
        </FormItem>

      </Form>
      <div slot="footer">
        <Button type="text" @click="hideEditModel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import {getList, getByNickName, del, save} from '@/api/store-user'

  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {

        confirm: true,
        title: '您确定要删除吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          del(currentRow.id).then(response => {
            vm.tableData.splice(index, 1)
            vm.$Message.success(response.data.msg)
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          size: 'small',
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '删除')
    ])
  };
  const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small',
        type: 'primary'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.showEditModel(currentRow);
        }
      }
    }, '编辑')
  };


  export default {
    name: 'stores_list',
    data() {
      return {
        selectWxUsermodal: {
          show: false,
        },
        modalSetting: {
          show: false,
          loading: false,
          index: 0
        },
        wxUserList: [],
        formItem: {
          id: null,
          name: '',
          unionid: '',
          openid: '',
          sid: '',
          phone: '',
          head_img: '',
          wx_uid: null
        },
        ruleValidate: {
          name: [
            {required: true, message: '姓名不能为空', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {
              validator: (rule, value, callBack) => {
                if (!value) {
                  callBack('请输入手机号码');
                } else if (/^[1][0-9]{10}$/.test(value)) {
                  callBack();
                } else {
                  callBack('请输入正确的手机号码');
                }
              }
            }
          ],
        },
        columnsList: [
          {
            title: '头像',
            align: 'center',
            width: 120,
            render: (h, params) => {
              return h('img', {
                style: {
                  margin: '5px',
                  width:'60px',
                  height:'60px'
                },
                attrs:{
                  src:params.row.head_img
                }
              })
            }
          },
          {
            title: '手机号',
            align: 'center',
            key: 'phone',
            width: 140
          },
          {
            title: '姓名',
            align: 'center',
            key: 'name',
            width: 120
          },
          {
            title: '创建日期',
            align: 'center',
            key: 'create_time',
            width: 180
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                editButton(this, h, params.row, params.index),
                deleteButton(this, h, params.row, params.index)
              ])
            }
          }
        ],
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        keywords: ''
      }
    },
    created() {
      this.init();
    },
    watch: {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      '$route' (to, from) {
				if(to.name===from.name){
          // 重置数据
          Object.assign(this.$data, this.$options.data());
          /** 初始化其他数据 */
          this.init();
				}
      }
    },
    methods: {
      init(){
        let sid = this.$route.params.sid;
        if(!sid){
          this.$Message.error('无效的id');
        }else {
          this.formItem.sid = sid;
          this.getList()
        }
      },
      showEditModel(item) {
        this.hideSelectModel();
        this.formItem.name=item.name;
        this.formItem.id=item.id;
        this.formItem.phone=item.phone;
        this.formItem.wx_uid=item.wx_uid;
        this.formItem.unionid=item.unionid;
        this.formItem.openid=item.openid;
        this.formItem.head_img=item.head_img;
        this.modalSetting.show = true;
      },
      hideSelectModel() {
        this.selectWxUsermodal.show = false;
      },
      showSelectModel() {
        this.selectWxUsermodal.show = true;
      },
      hideEditModel() {
        this.modalSetting.show = false;
      },
      search() {
        if (this.keywords === '') {
          this.$Message.warning('请输入至少一个关键字');
          return;
        }
        let vm = this;
        getByNickName(this.keywords).then(rep => {
          vm.wxUserList = rep.data.data;
          vm.wxUserList.forEach(v=>{
            v.wx_uid =v.id;
            v.id = null;
          })
        })
      },
      changePage(page) {
        this.tableShow.currentPage = page
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size
        this.getList()
      },
      submit() {
        let vm = this;
        vm.modalSetting.loading = true;
        vm.$refs['myForm'].validate((valid) => {
          if (valid) {
            save(vm.formItem).then(rep=>{
              vm.modalSetting.loading = false;
              vm.$Message.success('添加成功');
              vm.hideEditModel();
              vm.tableShow.currentPage = 1;
              vm.getList();
            },error=>{
              vm.modalSetting.loading = false;
            })
          }
        });
      },
      reFresh(){
        this.changePage(1);
      },
      getList() {
        let vm = this
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          sid:vm.formItem.sid
        };
        getList(params).then(response => {
          vm.tableData = response.data.data.list
          vm.tableShow.listCount = response.data.data.count
        })
      }
    }
  }
</script>
